<template>
  <div class="lookGraduation">
    <el-breadcrumb separator="/" class="breadcrumb-bottom">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>毕业设计</el-breadcrumb-item>
      <el-breadcrumb-item>查看毕业设计题目</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row :gutter="20">
      <el-col :span="5">
        <div class="">
          <el-select v-model="lookGraduationForm.majorID" placeholder="请选择专业" class="max-width" style="width:100%;">
            <el-option v-for="item in majorData" :label="item.majorName" :value="item.majorID"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-date-picker
            v-model="lookGraduationForm.academicYear"
            @change="changeAcademicYear"
            align="right"
            type="year"
            class="max-width"
            placeholder="请选择学年">
          </el-date-picker>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="">
          <el-select v-model="lookGraduationForm.term" placeholder="请选择学期" class="max-width">
            <el-option label="01" value="01"></el-option>
            <el-option label="02" value="02"></el-option>
          </el-select>
        </div>
      </el-col>
      <el-col :span="5">
        <div class="overflow-clear">
          <el-button type="primary" @click="searchRes">立即搜索</el-button>
        </div>
      </el-col>
    </el-row>
    <el-button-group class="float-right mb-5">
      <el-button type="primary" @click="toQueryGraduation">
        上传毕业设计题目
      </el-button>
       <el-button type="primary" class="add-pd-26" @click.native.prevent="downloadFile">导出</el-button>
    </el-button-group>

    <el-table
      :data="courseTable"
      style="width: 100%"
    >
      <el-table-column
        prop="graduateTitle"
        label="课题名称"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="负责教师"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="titleSource"
        label="课题来源"
        min-width="120"
        sortable>
      </el-table-column>
      <el-table-column
        prop="num"
        label="要求人数"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="itemCategoryName"
        label="项目类别名称"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="itemCategoryID"
        label="项目类别编号"
        min-width="120">
      </el-table-column>
      
      <el-table-column
        prop="majorName"
        label="专业"
        min-width="120">
      </el-table-column>
      <el-table-column
        prop="academicYear"
        label="学年"
        min-width="100">
      </el-table-column>
      <el-table-column
        label="课题附件"
        min-width="120">
        <template scope="scope">
          <el-button type="text" @click.native.prevent="showTitleAttachment(scope.row.titleAttachment)">
            {{scope.row.titleAttachmentName}}
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'lookGraduation',
    data() {
      return {
        lookGraduationForm: {
          majorID: '',
          academicYear: '',
          term: ''
        },
        courseTable: [{
          graduateProgramID: '',
          graduateTitle: '',
          titleSource: '',
          num: '',
          itemCategoryID: '',
          itemCategoryName: '',
          teacherName: '',
          majorName: '',
          titleAttachmentName: '',
          titleAttachment: '',
          academicYear:'’'
        }],
        page: 1,
        pageSize: 10,
        pageSizes: [10, 20, 30, 40],
        total: 40,
        majorData: [],
        searchStatus:0,
        apiUrl: this.$until.url + '/graduateProgram/getGraduateProgram',
        initUrl: this.$until.url + '/courseDesign/getMajorDesign'
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.res()
      });
      this.getMajorData();
    },
    methods: {
      res(){
        this.$http.get(this.apiUrl,{
            params: {
              page: this.page,
              pageSize: this.pageSize
            }
          }
        ).then((res) => {
          console.log(res)
          this.total = res.body.totalNum.totalNum;
          this.courseTable = res.body.program
        }, (err) => {
          console.log('服务器异常')
        })
      },
      searchRes: function () {
        this.searchStatus = 1
        this.$http.post(this.apiUrl, this.lookGraduationForm, {
            params: {
              page: this.page,
              pageSize: this.pageSize
            },
            emulateJSON: true
          }
        ).then((res) => {
          this.total = res.body.totalNum.totalNum;
          this.courseTable = res.body.program
        }, (err) => {
          console.log('服务器异常')
        })
      },
      handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.pageSize = val
        if (this.searchStatus == 1) {
          this.searchRes()
        } else {
          this.res()
        }
      },
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.page = val;
        if (this.searchStatus == 1) {
          this.searchRes()
        } else {
          this.res()
        }
      },
      getMajorData: function () {
        this.$http.post(this.initUrl)
          .then((res) => {
            this.majorData = Array.from(res.body);
          }, (err) => {
            console.log(err)
          })
      },
      changeAcademicYear: function (val) {
        this.lookGraduationForm.academicYear = val;
      },
      showTitleAttachment(titleAttachment){
        window.open(this.$until.url + '/' + titleAttachment)
      },
      toQueryGraduation(){
        this.$router.push({path: 'QueryGraduation'})
      },
      downloadFile(){
        this.$http.get(`${this.$until.url}/graduateProgram/exportProgram`,{
          params: this.lookGraduationForm
        }).then((res) => {
          var url = res.body.message
          try {
            var elemIF = document.createElement("iframe");
            elemIF.src = url;
            elemIF.style.display = "none";
            document.body.appendChild(elemIF);
          } catch (e) {
          }
        }, (err) => {

        })
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .max-width {
    width: 100% !important;
  }

  .add-pd-26 {
    padding-left: 1.6em;
    padding-right: 1.6em;
  }
</style>
